<template>
  <view>
    <!-- 日历模式/列表模式 -->
    <view class="heardTopbutton">
      <view class="btn">
        <button :class="active?'yanSe':''" @click="riLi('日历模式')" size="mini" style="margin-right: 20rpx;">日历模式</button>
        <button :class="active?'':'yanSe'" @click="riLi('列表模式')" size="mini">列表模式</button>
      </view>
    </view>
    <!-- 列表模式 -->
    <my-libiaomoshi v-if="!active "></my-libiaomoshi>
    <!-- 小黑早教，小黑绘本萌萌乐视频 -->
    <view class="heardTopbutton" v-else-if="active">
      <view class="btn">
        <button @click="switchHabdler(0)" size="mini" style="margin-right: 20rpx;" :class="switchTab===0? 'yanSe':''">小黑早教</button>
        <button @click="switchHabdler(1)" size="mini" style="margin-right: 20rpx;" :class="switchTab===1? 'yanSe':''">小黑绘本</button>
        <button @click="switchHabdler(2)" size="mini" :class="switchTab===2? 'yanSe':''">萌萌乐视频</button>
      </view>
      <!-- 日期 -->
      <view class="riQi">
        <text>今天{{time+tian}}</text>
        <picker class="pickTime" mode = "date" @change="bindTimeChange"><image class="itimeTday" :src="url" ></image></picker>
      </view>
      <!-- 下面列表 -->
      <my-xiaoheizaojiao v-if="switchTab===0"></my-xiaoheizaojiao>
      <my-xiaoheihuiben v-else-if="switchTab===1"></my-xiaoheihuiben>
      <my-mengmengleshiping v-else-if="switchTab===2"></my-mengmengleshiping>
    </view>
  </view>
</template>

<script setup>
  import {ref} from 'vue'
  let url='https://cdn3.axureshop.com/demo/2027306/images/%E8%A7%82%E7%9C%8B%E5%8E%86%E5%8F%B2_3/u12432.png'
  const active = ref(true)
  const switchTab = ref(0)
   // 日历模式列表模式点击切换
  const riLi=(item)=>{
    if(item==='日历模式'){
      active.value=true
    }else{
      active.value=false
    }
  }
  //切换三个列表
  const switchHabdler=(item)=>{
    switchTab.value=item
    // console.log(item)
  }
  //今天时间
  let date= new Date()
  let shijian=date.toLocaleDateString()
  let time=ref(shijian.split('/').join('-'))
  let tian=ref('周'+'日一二三四五六'.charAt(date.getDay()))
  // 日期
  const bindTimeChange=(e)=>{
    date = new Date(e.detail.value)
    time.value = e.detail.value
    tian.value = '周'+'日一二三四五六'.charAt(date.getDay())
  }
</script>

<style lang="scss">
  .heardTopbutton {
    .yanSe{
        background-color: black;
        color: white;
      }
    height: 55px;
    border-top: 1px solid black;
    .btn{
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      button{
        margin: 0;
        align-self: center;
        border-radius: 15px;
      }
      
    }
    .riQi{
      width: 100%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border: 1px solid black;
      .pickTime{
        display: inline-block;
        .itimeTday{
        margin-left: 10px;
        width: 22px;
        height: 22px;
        vertical-align: middle;
      }
      }
      
    }
  }
</style>
